import React from 'react'
import { Badge, TabBar } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import style from './css/index.module.css'
import { useNavigate } from 'react-router-dom';
function Tabr() {
    let nav=useNavigate()
    const tabs = [
      {
        key: "home",
        title: "首页",
        icon: <AppOutline />,
      
      },
      {
        key: "order",
        title: "待办",
        icon: <UnorderedListOutline />,
    
      },
      {
        key: "user",
        title: "消息",
        icon: (active) =>
          active ? <MessageFill /> : <MessageOutline />,
   
      },
      {
        key: "my",
        title: "我的",
        icon: <UserOutline />,
      },
    ];

  return (
    <div className={style.op}>
      <TabBar onChange={(key)=>nav(key)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default Tabr
